@main-background:#f1f3f6;

body,html{
  position:relative;
  width:100%;
}
html{
  height:100%;
}
body{
  min-height:100%;
  overflow-x: hidden;
  overflow-y:auto;
}
.@{css-prefix}body{
  position:absolute;
  width:100%;
  min-height:100%;
}

.@{css-prefix}layout-mobile-main{
  display:-webkit-box;
  position: absolute;
  width:100%;
  min-height: 100%;
  top:56px;
  background-color:@main-background;
}

.@{css-prefix}layout-pc-main{
  display:-webkit-box;
  position: absolute;
  width:100%;
  min-height: 100%;
  top:56px;
  background-color:@main-background;
}

.@{css-prefix}container{
  position: relative;
    z-index: 99;
  -webkit-box-flex:1;
  background-color:@main-background;
  padding:.48rem;
 .transition();
}

.@{css-prefix}layout-mobile-main.off .@{css-prefix}container{
  .transform-translate(220px;0);
  box-shadow: -2px 0px 30px #000;
}

.@{css-prefix}layout-pc-main.off .@{css-prefix}menu{
  .transform-translate(-220px;0);
}

.@{css-prefix}layout-pc-main .@{css-prefix}container{
  margin-left:230px;
}
.@{css-prefix}layout-pc-main.off .@{css-prefix}container{
  margin-left:0;
}

.@{css-prefix}pd-t5{
  .pd-t(.2rem;)
}
.@{css-prefix}pd-tb10{
  .pd-tb(10px;)
}